<template>
  <div class="cont">
    <div class="fx-1">
      <span class="title">掌柜利润</span>
      <span class="date">查询时间:{{$utils.toTimeFormat(date,'yyyy年MM月dd日 hh时mm分')}}</span>
      <el-button type="text" @click="refresh">刷新</el-button>
    </div>
    <div class="item">
      <p>累计利润</p>
      <h4>{{wallet.totalAmount}}元</h4>
    </div>
    <div class="item">
      <p>当日利润</p>
      <h4>{{wallet.dayAmount}}元</h4>
    </div>
  </div>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import vTitle from './title.vue'

  @Component({
    components: {
      vTitle
    }
  })
  export default class Store extends Vue {
    @Prop({
      default: () => {}
    }) wallet
    date = +new Date()

    refresh () {
      this.$emit('refresh')
      this.date = + new Date()
    }
  }
</script>

<style lang="less" scoped>
  .cont {
    height: 114px;
    display: flex;

  }

  .title {
    font-size: 20px;
    color: #666;
    margin: 20px auto 40px;
    padding-left: 20px;
  }

  .date {
    color: #999;
  }

  .item {
    width: 250px;
    p {
      color: #999;
      height: 40px;
      line-height: 40px;
    }
    h4 {
      font-size: 24px;
    }
  }
</style>
